<template>
  <div>
    <div class="df aic jcsb ">
      <home-card v-for="(v) in cardData" :key="v.title" :title="v.title" :count="v.count">
        <span class="iconfont" :class="v.icon" :style="{color:v.bg}"></span>
      </home-card>
    </div>
    <!-- <div class="mt20 p-1 myChart" ref="chartRef"> </div> -->
    <chart-line :chart-data="chartData"></chart-line>
  </div>
</template>

<script>
import { api_order_totaldata } from "@/apis/total";
import HomeCard from "./HomeCard";
//引入echarts
// import * as echarts from "echarts";
import ChartLine from '@/components/ChartLine'
export default {
  data() {
    return {
      homeData: {
        totalOrder: 0, //总订单
        totalAmount: 0, //总销售额
        todayOrder: 0, //今日订单
        totayAmount: 0, //今日销售额
      },
      cardData: [],
      // myChart:null,
      chartData:{}

    };
  },
  components: {
    HomeCard,
    ChartLine
  },
  created() {
    this.getTotalData();
  },
  mounted(){

    // 监听窗口变化
    // window.addEventListener("resize", this.getResize);
  },
  // 切换页面，销毁监听窗口
  // destroyed() {
  //   window.removeEventListener("resize", this.getResize);
  // },
  methods: {
    async getTotalData() {
      const res = await api_order_totaldata();
      //解构数据
      let {
        xData,
        orderData,
        amountData,
        totalOrder,
        totalAmount,
        todayOrder,
        totayAmount,
      } = res.data;
      //处理数据
      let temp = [
        {
          title: "总订单",
          count: totalOrder,
          icon: "icon-dingdanjihe",
          bg:'#409eff'
        },
        {
          title: "总销售额",
          count: totalAmount,
          icon: "icon-edu",
          bg:'#c46391'
        },
        {
          title: "今日订单数",
          count: todayOrder,
          icon: "icon-dingdan",
          bg:'#409eff'
        },
        {
          title: "今日销售额",
          count: totayAmount,
          icon: "icon-xiaoshoue",
          bg:'#c0fc6f'
        },  
      ];
      //数据赋值
      this.cardData=temp;

      this.chartData={
        xData,
        series:[
          {
          type: "line",
          name: "金额数据",
          data: amountData,
          smooth: true,
        },
        {
          type: "line",
          name: "订单数据",
          data: orderData,
          smooth: true,
        },
        ]
      }
    }
      //处理数据
    //   let series = [
    //     {
    //       type: "line",
    //       name: "金额数据",
    //       data: amountData,
    //       smooth: true,
    //     },
    //     {
    //       type: "line",
    //       name: "订单数据",
    //       data: orderData,
    //       smooth: true,
    //     },
    //   ];

    //   //画图,在请求函数中调用Echarts图表，传入处理好的数据
    //   this.renderLine({
    //     series,
    //     xData,
    //   });
    // },


//画折线图
    // renderLine(obj) {
    //   // 基于准备好的dom，初始化echarts实例
    //   this.myChart = echarts.init(this.$refs.chartRef);
    //   //配置项
    // //   let options = 
    //   // 绘制图表
    //   this.myChart.setOption({
    //     title: {
    //       text: "数据统计",
    //       top:10
    //     },
    //     // 鼠标放到数据上面提示信息
    //     tooltip: {
    //       trigger: "axis",
    //     },
    //     // 图例
    //     legend: {
    //         top:10
    //     },
    //     grid: {
    //       left: "3%",
    //       right: "4%",
    //       bottom: "3%",
    //       containLabel: true,
    //     },
    //     // 下载
    //     // toolbox: {
    //     //   feature: {
    //     //     saveAsImage: {},
    //     //   },
    //     // },
    //     xAxis: {
    //       type: "category",
    //       boundaryGap: false,
    //       data: obj.xData,
    //     },
    //     yAxis: {
    //       type: "value",
    //     },
    //     // series: [
    //     //   {
    //     //     name: "Email",
    //     //     type: "line",
    //     //     stack: "Total",
    //     //     data: [120, 132, 101, 134, 90, 230, 210],
    //     //   },
    //     //   {
    //     //     name: "Union Ads",
    //     //     type: "line",
    //     //     stack: "Total",
    //     //     data: [220, 182, 191, 234, 290, 330, 310],
    //     //   },
    //     // ],
    //     series: obj.series,
    //   })
    // },
// Echarts也有一个resize方法，可以监听窗口变化
    // getResize() {
    //   this.myChart && this.myChart.resize();
    // },


  }
}
</script>

<style lang="scss" scoped>
.myChart{
    width: 100%;
    height: 500px;
    background-color: #fff;
}
</style>